<template>
  <BasicTitle v-if="!isDetail" class="basic-drawer-header">
    <slot name="title"></slot>
    {{ !$slots.title ? title : '' }}
  </BasicTitle>
  <div class="basic-drawer-header basic-drawer-header--detail" v-else>
    <span class="basic-drawer-header__wrap">
      <span @click="handleClose" v-if="showDetailBack">
        <!-- <left-outlined class="basic-drawer-header__back" /> -->
        <IconFont iconType="icon-fanhui" customClass="basic-drawer-header__back" />
      </span>
      <span v-if="title" class="basic-title">{{ title }}</span>
    </span>
    <span class="basic-drawer-header__toolbar">
      <slot name="titleToolbar"></slot>
    </span>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import BasicTitle from '@/components/Basic/BasicTitle.vue'
import { LeftOutlined } from '@ant-design/icons-vue'
import IconFont from '@/components/IconFont/index.vue'

export default defineComponent({
  name: 'BasicDrawerHeader',
  components: { BasicTitle, LeftOutlined, IconFont },
  props: {
    isDetail: { type: Boolean, default: false },
    showDetailBack: { type: Boolean, default: false },
    title: { type: String, default: '' }
  },
  emits: ['close'],
  setup(_, { emit }) {
    function handleClose() {
      emit('close')
    }

    return { handleClose }
  }
})
</script>

<style lang="less" scoped>
.basic-drawer-header {
  display: flex;
  height: 100%;
  align-items: center;
  .basic-drawer-header__back {
    padding: 0 12px;
    font-size: 16px;
    color: #555d6f;
    cursor: pointer;
  }
  .basic-drawer-header__wrap {
    flex: 1;
    .basic-title {
      margin-left: 20px;
      color: #172237;
      font-weight: 600;
      font-size: 16px;
    }
  }
  .basic-drawer-header__toolbar {
    padding-right: 50px;
  }
}
</style>
